<style type="text/css">
    iframe {
        position: absolute;
        left: -100px;
        top: -100px;

        width: 10px;
        height: 10px;
        overflow: hidden;
    }

    #progressbar {
        position: static;
        left: 10px;
        top: 50px;
    }

    .pg-progressbar {
        position: relative;

        width: 250px;
        height: 24px;
        overflow: hidden;

        border: 1px solid #c6c6c6;
    }

    .pg-progress {
        z-index: 150;

        position: absolute;
        left: 0;
        top: 0;

        width: 0;
        height: 24px;
        overflow: hidden;
    }

    .pg-progressstyle {
        height: 22px;

        border: 1px solid #748a9e;
        background-image: url('animation.gif');
    }

    .pg-text,
    .pg-invertedtext {
        position: absolute;
        left: 0;
        top: 4px;

        width: 250px;

        text-align: center;
        font-family: sans-serif;
        font-size: 12px;
    }

    .pg-invertedtext {
        color: #ffffff;
    }

    .pg-text {
        z-index: 100;
        color: #000000;
    }
</style>
<script type="text/javascript">
    function makeRequest(url)
    {
        alert(url);
        var httpRequest;

        if (window.XMLHttpRequest) {
            httpRequest = new XMLHttpRequest();
            if (httpRequest.overrideMimeType) {
                httpRequest.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) {
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                }
            }
        }

        if (!httpRequest) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        httpRequest.open('GET', url, true);
        console.log(httpRequest);
//        httpRequest.onreadystatechange = function() {
//            evalProgress(httpRequest);
//        };

        httpRequest.send('');

    }

    function observeProgress()
    {
        setTimeout("getProgress()", 100);
    }

    function getProgress()
    {
        makeRequest('/uploader/progress?uploadId=' + document.getElementById('progress_key').value);
    }

    function evalProgress(httpRequest)
    {
        try {
            if (httpRequest.readyState == 4) {
                if (httpRequest.status == 200) {
                    var data = eval('(' + httpRequest.responseText + ')');
                    console.log(data);
                    if (data.finished) {
                        finish();
                    } else {
                        update(data);
                        setTimeout("getProgress()", 100);
                    }
                } else {
                    alert('There was a problem with the request.');
                }
            }
        } catch (e) {
            alert('Caught Exception: ' + e.description);
        }
    }

    function update(data)
    {
        document.getElementById('pg-percent').style.width = data.percent + '%';

        document.getElementById('pg-text-1').innerHTML = data.timeRemaining + ' seconds remaining';
        document.getElementById('pg-text-2').innerHTML = data.timeRemaining + ' seconds remaining';
    }

    function finish()
    {
        document.getElementById('pg-percent').style.width = '100%';

        document.getElementById('pg-text-1').innerHTML = 'Upload done';
        document.getElementById('pg-text-2').innerHTML = 'Upload done';
    }
</script>
Max upload file size = <?= $this->maxUploadFileSize ?><br>
Max post size = <?= $this->postMaxSize ?>

<?= $this->form; ?><br>
<iframe name="uploadTarget"></iframe>

<div id="progressbar">
    <div class="pg-progressbar">
        <div class="pg-progress" id="pg-percent">
            <div class="pg-progressstyle"></div>
            <div class="pg-invertedtext" id="pg-text-1"></div>
        </div>
        <div class="pg-text" id="pg-text-2"></div>
    </div>
</div>
<div id="progressBar"><div id="progressDone"></div></div>
